<template>
	<view class="content">
		<!--居住信息-->
		<view class="content_1">
			<view class="title">居住位置</view>
			<view class="line_title"></view>
			<!--居住位置picker弹窗-->
			<view class="choose_view">
				<!-- 参考 https://www.jianshu.com/p/924f3b560e4c ~~ -->
				<!-- 城市列表 -->
				<picker :class="data.citys == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'citysList')" :value="data.citys" :range="citysList" range-key="areaName">
					<view class="choose_text">{{citysList[data.citys].areaName}}</view>
					<image class="choose_icon" src="../../../static/mine/downjiantou.svg"></image>
				</picker>
				<!-- 区域列表 -->
				<picker class="choose_box" :class="data.classify == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'classifyList')" :value="data.classify" :range="classifyList"
				 range-key="areaName">
					<view class="choose_text">{{classifyList[data.classify].areaName}}</view>
					<image class="choose_icon" src="../../../static/mine/downjiantou.svg"></image>
				</picker>
				<!-- 热点标签列表 -->
				<picker class="choose_box" :class="data.hot == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'hotList')" :value="data.hot" :range="hotList" range-key="describes">
					<view class="choose_text">{{hotList[data.hot].describes}}</view>
					<image class="choose_icon" src="../../../static/mine/downjiantou.svg"></image>
				</picker>
			</view>
		</view>
		<!--房屋信息-->
		<view class="content_2">
			<view class="title">房屋信息</view>
			<view class="line_title"></view>
			<!--房屋信息picker弹窗-->
			<view class="choose_view">
				<!-- 室 -->
				<picker class="choose_box" :class="data.living == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'livingList')" :value="data.living" :range="livingList"
				 range-key="show_name">
					<view class="choose_text">{{livingList[data.living].show_name}}</view>
					<image class="choose_icon" src="../../../static/mine/downjiantou.svg"></image>
				</picker>
				<!-- 房 -->
				<picker class="choose_box" :class="data.bed == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'bedList')" :value="data.bed" :range="bedList" range-key="show_name">
					<view class="choose_text">{{bedList[data.bed].show_name}}</view>
					<image class="choose_icon" src="../../../static/mine/downjiantou.svg"></image>
				</picker>
				<!-- 卫 -->
				<picker class="choose_box" :class="data.toilet == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'toiletList')" :value="data.toilet" :range="toiletList"
				 range-key="show_name">
					<view class="choose_text">{{toiletList[data.toilet].show_name}}</view>
					<image class="choose_icon" src="../../../static/mine/downjiantou.svg"></image>
				</picker>
			</view>
		</view>
		<!--最低签约时长-->
		<view class="content_3">
			<view class="title">最低签约时长</view>
			<view class="line_title"></view>
			<view class="choose_time_view">
				<block v-for="(data, index) in signTime" :key="index">
					<view :class="[data.status == 1 ? 'time_box_active' : 'time_box']" @click="toChoose(index, 'signTime')">{{data.show_name}}</view>
				</block>
			</view>
		</view>
		<!--租金额-->
		<view class="content_7">
			<view class="title">租金额</view>
			<view class="line_title"></view>
			<view class="range_money">
				<view class="money">¥ {{startmoney}} - ¥ {{endmoney}}</view>
			</view>
			<view class="rang_view">
				<range-slider :min="min_money" :max="max_money" :values="range_money" :step="step" class="range_choose" @rangechange='rangeChange'></range-slider>
			</view>
			<view class="rang_font">
				<view>¥ 0</view>
				<view>¥ 不限</view>
			</view>
		</view>
		<!--房屋特色-->
		<view class="content_4">
			<view class="title">房屋特色</view>
			<view class="line_title"></view>
			<view class="special_view">
				<block v-for="(data, index) in lableList" :key='index'>
					<view :class="[data.status == 1 ? 'choose_house_special':'house_special']" @click="toChooses(index, 'lableList', 'chooseLabal', 'id', 'show_name')">{{data.show_name}}</view>
				</block>
			</view>
		</view>
		<!--备注-->
		<!-- <view class="content_5">
			<view class="title">备注 </view>
			<view class="line_title"></view>
			<textarea class="remarks_input" placeholder="多行输入内容" @input="inputButton($event,'remarks')"></textarea>
		</view> -->
		<!--底部提交-->
		<view class="content_6" @click="submit">
			提交
		</view>
		<view class="content_8" @click="backto">重置</view>
	</view>
</template>

<script>
	//引入子组件
	import Range from '../../../components/range-slider/range-slider.vue';
	//导入接口请求文件
	import {Request} from '../../../utils/request.js';
	//	自定义函数文件
	import func from '../../../utils/function.js'
	const Requ = new Request();
	const Func = new func();
	const app = getApp();
	export default {
		//注册子组件
		components: {
			Range
		},
		data() {
			return {
				startmoney: '',		// 用户选择最小金额
				endmoney: '',		// 用户选择最大金额
				range_money: [],	//	租金滑动范围值
				max_money: '',		//	后台设置初始选中最大租金范围
				min_money: '',		//	后台设置初始选中最小租金范围
				step: '',			//	设置滑动步长
				data: {
					citys: 0,
					classify: 0,
					hot: 0,
					living: 0,
					bed: 0,
					toilet: 0,
				},
				citysList: [],		//	城市列表
				classifyList: [],	//	区域列表
				hotList: [],		//	热点列表
				livingList: [],		//	室列表
				bedList: [],		//	房列表
				toiletList: [],		//	卫列表
				signTime: [],		//	最低签约时长
				lableList: [],		//	房屋标签列表
			}
		},
		methods: {
			//重置返回首页重新加载数据
			backto:	function(){
				if(!app.globalData.select_city){
					new Request().showToast('请筛选');
					return;
				}
				let AGD = app.globalData;
				let that = this;
				AGD.select_city = '';			that.data.citys = this.citysId = 0;
				AGD.select_district = '';		that.data.classify = this.classifyId = 0;
				AGD.select_labelName = '';		that.signTime.map(e => {e.status = 2;});	this.chooseLabal = undefined;
				AGD.select_chooseTimeId = '';	that.lableList.map(e => {e.status = 2;});	this.chooseTimeId = 0;
				AGD.select_startmoney = '';		that.startmoney = this.startmoney = 0;
				AGD.select_endmoney = '';		that.endmoney = this.endmoney = 0;
				AGD.select_livingId = '';		that.data.living = this.livingId = 0;
				AGD.select_bedId = '';			that.data.bed = this.bedId = 0;
				AGD.select_toiletId = '';		that.data.toilet = this.toiletId = 0;
				AGD.select_hotid = '';			that.data.hot = this.hotId = 0;
				//	租金滑动范围
				that.range_money = [0, 0];
				new Request().showToast('重置成功');
				return;
			},
			//	获取子组件传过来的值
			rangeChange:function (res) {
				this.startmoney = res.minValue;
				this.endmoney = res.maxValue;
			},
			//	picker选择改变
			pickerChange: function(e, val) {
				let index = e.target.value;
				if(val == 'citysList'){
					Func.def_val(this, 'citysId', null, this.citysList[index].areaId);
					Func.def_val(this, 'data', 'citys', index);
					// this.citysId = this.citysList[index].areaId;
					// this.data.citys = index;
					this.district();
				}
				if(val == 'classifyList'){
					this.classifyId = this.classifyList[index].areaId;
					this.data.classify = index;
				}
				if(val == 'hotList'){
					this.hotId = this.hotList[index].id;
					this.data.hot = index;
				}
				if(val == 'livingList'){
					this.livingId = this.livingList[index].id;
					this.data.living = index;
				}
				if(val == 'bedList'){
					this.bedId = this.bedList[index].id;
					this.data.bed = index;
				}
				if(val == 'toiletList'){
					this.toiletId = this.toiletList[index].id;
					this.data.toilet = index;
				}
				
			},
			//获取城市区域列表数据
			district: function(){
				let PostApi = (url, PostData, Response) => {
					new Request(url).request(
						()=>{
							return 'POST'
						},
						()=>{
							return PostData;
						},
						(res)=>{
							Response(res);
						}
					);
				}
				let that = this;
				//获取市区域列表
				PostApi('landboos/Create_House/GetCityList', {city: this.citysId}, (res)=>{
					that.classifyList = res.data.data;
					that.data.classify = 0;
					that.classifyId = that.classifyList[0].areaId;
				});
			},
			//最低签约时长 
			toChoose: function(index, arr) {
				for(let i=0,l=this[arr].length; i<l; i++){
					if(index == i){
						this[arr][index].status = 1
					}else{
						this[arr][i].status = 2
					}
				}
				if(arr == 'signTime'){
					this.chooseTimeId = this[arr][index].id;
					// console.log('this.chooseTimeId',this.chooseTimeId)
				}
				if(arr == 'lableList'){
					this.chooseLableId = this[arr][index].id;
					// console.log('this.chooseLableId',this.chooseLableId)
				}
				
			},
			/** 多项选择器  | 特色标签 选择
			 * @param {Object} index		数组下标
			 * @param {Object} arr			需要处理的原数组
			 * @param {Object} container	重新赋值的新数组变量名
			 * @param {Object} saveid		需要保存数组id 
			 * @param {Object} savename		是否需要保存数组name 
			 */	
			toChooses: function(index, arr, container, saveid, savename = false){
				let AppGlobalDataLabelName = app.globalData.select_labelName;
				for (let i = 0, l = this[arr].length; i < l; i++) {
					let newArr = container;
					if (index == i) {
						// 第二次编辑进入
						if(AppGlobalDataLabelName != ''){
							this[newArr] = app.globalData.select_labelName;
						}
						if(this[arr][index].status != 1){
							var saveArr = {'id':this[arr][index][saveid]}
							if(saveid && savename){
								var saveArr = {'id':this[arr][index][saveid], 'name':this[arr][index][savename]}
							}
							//未选择
							this[arr][index].status = 1;
							if(this[newArr] == undefined){
								this[newArr] = [];
								this[newArr].push(saveArr);
							}else {
								let valueIndex = this[newArr].indexOf(this[arr][index][saveid]);
								if(valueIndex == -1){
									this[newArr].push(saveArr);
								}
							}
						}else {
							//已选择
							this[arr][index].status = 2;
							if(this[newArr] != undefined && this[newArr] != 0){
								var valueIndex = this[newArr].indexOf(this[arr][index][saveid]);
								if(saveid && savename){
									//	提取对象数组 某一列元素 且 获取属性 saveid 数组项首次出现的位置(下标)
									var valueIndex = this[newArr].map(e => {return e[saveid]}).indexOf(this[arr][index][saveid]);
								}
								if(valueIndex != -1){
									//移除数组某一值
									this[newArr].splice(valueIndex, 1);
								}
							}
						}
						// console.log('newArr',this[newArr]);
						break;
					}
				}
				// console.log('arr',this[arr]);
				
			},
			//监听输入
			inputButton: function(e, data){
				if(data == 'remarks'){
					this.inputRemarks = e.detail.value;
				}
			},
			// //阅读合同
			// readContract: function() {
			// 	if (this.readstate == '0') {
			// 		this.readstate = '1'
			// 	} else {
			// 		this.readstate = '0'
			// 	}
			// },
			//提交
			submit: function(){
				let that = this;
				let AGD = app.globalData;
				//	判断变量是否有赋值(citysId, classifyId)
				if(!Func.is_var(this, 'citysId')){
					new Request().showToast('城市列表未选择');
					return;
				}
				if(!Func.is_var(this, 'classifyId')){
					new Request().showToast('区域列表未选择');
					return;
				}
				// 赋值变量
				Func.is_var(that, 'citysId') 		== true ? Func.def_val(getApp(), 'globalData', 'select_city', this.citysId) : '';
				Func.is_var(that, 'classifyId') 	== true ? Func.def_val(getApp(), 'globalData', 'select_district', this.classifyId) : '';
				Func.is_var(that, 'hotId') 			== true ? Func.def_val(getApp(), 'globalData', 'select_hotid', this.hotId) : '';
				Func.is_var(that, 'livingId') 		== true ? Func.def_val(getApp(), 'globalData', 'select_livingId', this.livingId) : '';
				Func.is_var(that, 'bedId') 			== true ? Func.def_val(getApp(), 'globalData', 'select_bedId', this.bedId) : '';
				Func.is_var(that, 'toiletId') 		== true ? Func.def_val(getApp(), 'globalData', 'select_toiletId', this.toiletId) : '';
				Func.is_var(that, 'chooseTimeId') 	== true ? Func.def_val(getApp(), 'globalData', 'select_chooseTimeId', this.chooseTimeId) : '';
				Func.is_var(that, 'startmoney') 	== true ? Func.def_val(getApp(), 'globalData', 'select_startmoney', this.startmoney) : '';
				Func.is_var(that, 'endmoney') 		== true ? Func.def_val(getApp(), 'globalData', 'select_endmoney', this.endmoney) : '';
				Func.is_var(that, 'chooseLabal') 	== true ? Func.def_val(getApp(), 'globalData', 'select_labelName', this.chooseLabal) : '';
				uni.navigateBack({
				    delta: 1
				});    
				return;
			},
		},
		//	在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
		mounted(){
			// console.log('index-mounted');
		},
		onLoad(option) {
			this.live_id = option.live_id;
			if(app.globalData.Logincode == -1){
				new Request().showToast('您还未登陆','none', ()=>{
					setTimeout(()=>{
						uni.switchTab({url: '/pages/mine/mine',});
					},2001);
				});
				return;
			}
			let that = this;
			let AGD = app.globalData;
			//获取广东省城市列表
			Func.PostApi('landboos/Create_House/GetCityList', {city: 1935}, (res)=>{
				that.citysList = res.data.data;
				that.citysList.unshift({id: 0,areaName: '城市'});
				if(AGD.select_city != ''){
					Func.GetParamList('citysList', AGD.select_city, 'areaId', 'citys', 'citysId', that);
				}
				});
			//获取广东省广州市区域列表
			Func.PostApi('landboos/Create_House/GetCityList', {city: AGD.select_city == '' ? 1936 : AGD.select_city}, (res)=>{
				that.classifyList = res.data.data;
				that.classifyList.unshift({id: 0,areaName: '区域'});
				//	判断选择参数
				if(AGD.select_district != ''){
					Func.GetParamList('classifyList', AGD.select_district, 'areaId', 'classify', 'classifyId', that);
				}
				
				});
			//获取热点标签
			Func.PostApi('landboos/Create_House/GetRentType', {table: 'fa_renthouse_master_hot'}, (res)=>{
				that.hotList = res.data.data;
				that.hotList.unshift({id: 0,describes: '热点社区'});
				//	判断选择参数
				if(AGD.select_hotid != ''){
					Func.GetParamList('hotList', AGD.select_hotid, 'id', 'hot', 'hotId', that);
				}
				});
			//获取室列表
			//	1是 室表，2是 房表，3是 卫表， 4是最低签约时长，5是特色标签
			Func.PostApi('customer/push/Get_Push_List/GetList', {type: 1}, (res)=>{
				that.livingList = res.data.data;
				that.livingList.unshift({id: 0,show_name: '请选择'});
				//	判断选择参数
				if(AGD.select_livingId != ''){
					Func.GetParamList('livingList', AGD.select_livingId, 'id', 'living', 'livingId', that);
				}
				});
			//	房列表
			Func.PostApi('customer/push/Get_Push_List/GetList', {type: 2}, (res)=>{
				that.bedList = res.data.data;
				that.bedList.unshift({id: 0,show_name: '请选择'});
				//	判断选择参数
				if(AGD.select_bedId != ''){
					Func.GetParamList('bedList', AGD.select_bedId, 'id', 'bed', 'bedId', that);
				}
				});
			//	卫列表
			Func.PostApi('customer/push/Get_Push_List/GetList', {type: 3}, (res)=>{
				that.toiletList = res.data.data;
				that.toiletList.unshift({id: 0,show_name: '请选择'});
				//	判断选择参数
				if(AGD.select_toiletId != ''){
					Func.GetParamList('toiletList', AGD.select_toiletId, 'id', 'toilet', 'toiletId', that);
				}
				});
			//	最低签约时长列表
			Func.PostApi('landboos/Create_House/GetRentType', {
				table: 'fa_renthouse_master_rentmoney'
			}, (res) => {
				res.data.data.map((e)=>{
					e.status = 2;
					e.show_name = e.describes;
					if(e.id == AGD.select_chooseTimeId){
						e.status = 1;
						that.chooseTimeId = e.id;
						e.show_name = e.describes;
						return;
					}else{
						e.status = 2;
						e.show_name = e.describes;
					}
				});
				that.signTime = res.data.data
			});
			//房屋特色标签列表
			Func.PostApi('customer/push/Get_Push_List/GetList', {type: 5}, (res)=>{
				that.lableList = res.data.data
				if(AGD.select_labelName != ''){
					that.lableList.map(e => {
						let select_id = AGD.select_labelName.map(e => {return e.id}).indexOf(e.id);
						if(select_id != -1){
							e.status = 1;
							return;
						}else{
							e.status = 2;
						}
					})
				}
				});
			//租金范围
			Func.PostApi('customer/push/Get_Push_List/GetRent', {type: 6}, 
			(res)=>{
				
				that.startmoney = Func.is_var(AGD, 'select_startmoney') == true ? AGD.select_startmoney : res.data.data.choose_min;
				that.endmoney = Func.is_var(AGD, 'select_endmoney') == true ? AGD.select_endmoney : res.data.data.choose_max;
				that.max_money = res.data.data.max;
				that.min_money = res.data.data.min;
				that.step = res.data.data.step;
				// 租金 按钮滑动范围
				that.range_money = [that.startmoney, that.endmoney];
			});
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 200upx;
	}

	/*
		居住信息样式
	*/
	.content_1 {
		margin: 0 40upx;
		margin-top: 40upx;
	}

	.title {
		height: 37upx;
		font-size: 28upx;
		color: #333333;
		line-height: 37upx;
	}

	.line_title {
		height: 6upx;
		width: 120upx;
		background-color: #B3E9DC;
		margin-bottom: 4upx;
	}

	.choose_view {
		height: 60upx;
		margin: 0 5upx;
		margin-top: 15upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.choose_box {
		width: 200upx;
		height: 60upx;
		border-radius: 60upx;
		border: 5upx solid #D1D1D1;
		box-sizing: border-box;
		padding: 10upx 20upx 10upx 30upx;
		position: relative;
	}
	
	.choose_box_active{
		width: 200upx;
		height: 60upx;
		border-radius: 60upx;
		border: 5upx solid #B3E9DC;
		box-sizing: border-box;
		padding: 10upx 20upx 10upx 30upx;
		position: relative;
	}

	.choose_text {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #666666;
	}

	.choose_icon {
		height: 28upx;
		width: 28upx;
		position: absolute;
		top: 15upx;
		right: 20upx;
	}

	/*
		房屋信息样式
	*/
	.content_2 {
		margin: 0 40upx;
		margin-top: 80upx;
	}

	/*
		最低签约时长样式
	*/
	.content_3 {
		margin: 0 40upx;
		margin-top: 80upx;
	}

	.choose_time_view {
		margin-top: 20upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.time_box {
		height: 60upx;
		width: 160upx;
		line-height: 50upx;
		border-radius: 60upx;
		box-sizing: border-box;
		border: 5upx solid #B3E9DC;
		text-align: center;
		font-size: 28upx;
		color: #666666;
		margin: 10upx 0;
	}

	.time_box_active {
		height: 60upx;
		width: 160upx;
		line-height: 60upx;
		border-radius: 60upx;
		background-color: #B3E9DC;
		text-align: center;
		font-size: 28upx;
		color: #FFFFFF;
		margin: 10upx 0;
	}

	/*
		房屋特色样式
	*/
	.content_4 {
		margin: 0 40upx;
		margin-top: 80upx;
	}

	.special_view {
		margin-top: 20upx;
		display: flex;
		flex-wrap: wrap; //弹性盒元素换行
	}

	.house_special {
		height: 57upx;
		border-radius: 57upx;
		border: 4upx solid #B3E9DC;
		line-height: 57upx;
		font-size: 28upx;
		display: flex;
		align-items: center;
		text-align: center;
		padding: 0upx 40upx;
		color: #999999;
		margin-bottom: 20upx;
		margin-right: 26upx;
	}
	/* 选择的css */
	.choose_house_special {
		height: 57upx;
		border-radius: 57upx;
		border: 4upx solid #B3E9DC;
		background: #B3E9DC;
		line-height: 57upx;
		font-size: 28upx;
		display: flex;
		align-items: center;
		text-align: center;
		padding: 0upx 40upx;
		color: #FFFFFF;
		margin-bottom: 20upx;
		margin-right: 26upx;
	}

	/*
		备注样式
	*/
	.content_5 {
		margin: 0 40upx;
		margin-top: 80upx;
	}

	.remarks_input {
		height: 180upx;
		width: 568upx;
		margin: 0 auto;
		margin-top: 20upx;
		background-color: #FFFFFF;
		font-size: 28upx;
		color: #888888;
		padding: 10upx;
	}

	/*
		底部提交样式
	*/
	.content_6 {
		position: fixed;
		z-index: 99999;
		height: 100upx;
		width: 375upx;
		background-color: #63D0D5;
		bottom: 0upx;
		left: 0upx;
		/* padding-left: 40upx; */
		font-size: 32upx;
		color: #FFFFFF;
		line-height: 100upx;
		text-align: center;
		font-weight: bold;
	}
	
	/*
		底部重置样式
	*/
	.content_8 {
		position: fixed;
		z-index: 99999;
		height: 100upx;
		width: 375upx;
		background-color: #ffc802;
		bottom: 0upx;
		right: 0upx;
		/* padding-left: 40upx; */
		font-size: 32upx;
		color: #FFFFFF;
		line-height: 100upx;
		text-align: center;
		font-weight: bold;
	}

	.contract_view {
		height: 100upx;
		display: flex;
		align-items: center;
	}

	.contract_icon_view {
		height: 40upx;
		width: 40upx;
		border-radius: 40upx;
		border: 5upx solid #cccccc;
		box-sizing: border-box;
		margin-right: 30upx;
		display: flex;
		align-items: center;
	}

	.contract_icon {
		height: 22upx;
		width: 22upx;
		border-radius: 25upx;
		background-color: #5555ff;
		margin: 0 auto;
	}

	.contract {
		width: 410upx;
		font-size: 26upx;
		color: #FFFFFF;
	}

	.submit {
		height: 100upx;
		width: 240upx;
		background-color: #63D0D5;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		position: absolute;
		right: 0upx;
		top: 0upx;
	}

	/*
		租金额样式
	*/
	.content_7 {
		margin: 0 40upx;
		margin-top: 80upx;
	}
	
	.range_money{
		height: 100upx;
		display: flex;
		align-items: center;
	}
	
	.money{
		margin: 0 auto;
		height: 20upx;
		line-height: 20upx;
		font-size: 28upx;
		color: #63D0D5;
	}
	
	.rang_view{
		height: 80upx;
		width: 600upx;
		margin: 0 auto;
	}
	
	.rang_font{
		display: flex;
		justify-content: space-between;
		font-size: 28upx;
		color: #999999;
	}
	/* .content_6_inner {
		display: flex;
		
	} */
</style>
